﻿<div class="sharding-control" data-bind="visible: showContext, if: showContext">
    <div class="btn-group margin-left">
        <button class="btn btn-default btn-secondary" data-bind="click: changeScope, visible: canChangeScope" title="Select a shard to view">
            <i class="icon-settings"></i>
        </button>
    </div>    
    <div class="flex-horizontal">
        <div class="shard-selector">
            <i data-bind="css: { 'icon-shard': contextName() !== 'All Shards', 'icon-sharding': contextName() === 'All Shards'}"></i>
            <div data-bind="text: contextName"></div>
        </div>

    </div>
</div>
<div data-bind="compose: { model: shardSelector }" class="bs3"></div>
